<template>
  <div class="top">
    <div class="top1">
        <div style="display:flex;align-items:center">
            <img class="top3" src="../assets/image/logo.png">
            <div style="margin-left:40px">
                <el-dropdown @command="handleSchool">
                    <span class="el-dropdown-link" style="display:flex;align-items:center">
                        <div class="top2">
                            <i class="el-icon-location-information"></i>
                        </div>
                        {{school}}<i style="margin-right:10px" class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item :command="item.name + '@' + item.id" v-for="(item,index) in schoolArr" :key="index"><span style="font-family:'黑体'">{{item.name}}</span></el-dropdown-item> -->
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="top6">
                <div class="top7" :class="$route.path == '/'?'active':''" @click="toPage('index')">
                    首页
                </div>
                <div class="top7" :class="$route.path == '/food'?'active':''" @click="toPage('food')">
                    美食分享
                </div>
                <div class="top7" :class="$route.path == '/restaurant'?'active':''" @click="toPage('restaurant')">
                    餐厅推荐
                </div>
                <div class="top7" :class="$route.path == '/favor'?'active':''" @click="toPage('favor')">
                    我的收藏
                </div>
                <div class="top7" :class="$route.path == '/about'?'active':''" @click="toPage('about')">
                    关于
                </div>
            </div>
        </div>
        <div style="display:flex;align-items:center">
            <el-input style="width:240px" prefix-icon="el-icon-search" v-model="keyword" placeholder="请输入想要搜索的美食"></el-input>
            <div class="top4" @click="toFood">
                搜 索
            </div>
            <div style="margin-left:40px">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link top5" style="display:flex;align-items:center">
                        <img style="margin-right:10px" :src="$store.state.HOST + user.avatar">
                        <span style="font-family:'黑体'">{{user.userName}}</span>
                        <i style="margin-right:10px;margin-left:10px" class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="center"><span style="font-family:'黑体'">个人中心</span></el-dropdown-item></el-dropdown-item>
                        <el-dropdown-item command="myShare"><span style="font-family:'黑体'">我的分享</span></el-dropdown-item></el-dropdown-item>
                        <el-dropdown-item command="addShare"><span style="font-family:'黑体'">分享美食</span></el-dropdown-item></el-dropdown-item>
                        <el-dropdown-item command="out" divided><span style="font-family:'黑体'">退出</span></el-dropdown-item></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import {logout,getFoodSchoolList} from '../api/api' 
  export default {
    data() {
      return{
        schoolArr: [],
        school: "",
        keyword: "",
        user: {},
      }
    },
    methods: {
        toFood() {
            if (!this.keyword) {
                this.$message({
                    message: '请输入想要搜索的美食',
                    type: 'warning'
                });
                return
            }
            this.$router.push("/food?name=" + this.keyword)
        },
        handleSchool(command) {
            var list = command.split('@')
            this.school = list[0]
            window.localStorage.setItem("school",this.school)
            window.localStorage.setItem("schoolId",list[1])
            window.location.reload()
        },
        toPage(name) {
          if(name == 'index') {
              this.$router.push("/")
          } else if (name == "food") {
              this.$router.push("/food")
          } else if(name == 'restaurant') {
              this.$router.push("/restaurant")
          } else if(name == 'favor') {
              this.$router.push("/favor")
          } else if(name == 'about') {
              this.$router.push("/about")
          }
        },
        handleCommand(command) {
            if (command == 'center') {
                this.$router.push("/center")
            }
            if (command == 'myShare') {
                this.$router.push("/myShare")
            }
            if (command == 'addShare') {
                this.$router.push("/addShare")
            }
            if (command == 'out') {
                logout().then(res => {
                    logout().then(res => {
                        window.localStorage.removeItem("user_token")
                        window.localStorage.removeItem("user_info")
                        this.$message({
                            message: '退出成功',
                            type: 'success'
                        });
                        this.$router.push("/login")
                    })
                })
            }
        },
    },
    created() {
     
    },
    mounted() {
      this.user = JSON.parse(window.localStorage.getItem("user_info"))
      window.localStorage.setItem("school",this.user.school)
      window.localStorage.setItem("schoolId",this.user.schoolId)
      this.school = this.user.school
    }
 }
</script>

<style scoped>
@import url('../assets/css/top.css');
.top1>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>